import React from 'react';
import {observer} from 'mobx-react';
import LinearGradinet from 'react-native-linear-gradient';
import styled from 'styled-components/native';

import Text from './Text';
import {useGlobal} from '../hooks/useStores';
import {Focusable} from '.';
import useWidth from '../hooks/useWidth';
import {Flex} from './Layout';
import {useEffect} from 'react';
import {Navigation} from 'react-native-navigation';

const Item = styled.ImageBackground`
  width: 100%;
  height: 100%;
  position: relative;
`;

const Name = styled(LinearGradinet)`
  height: 50%;
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
`;
export const RecommendItem: React.FC<{
  detail: any;
  componentId: string;
  width?: number;
}> = ({detail, componentId, width}) => {
  const {w5, space} = useWidth();
  const {picUrl, name, coverImgUrl} = detail;

  return (
    <Focusable
      style={{
        width: width || w5,
        height: width || w5,
        marginBottom: space,
      }}
      onPress={() => {
        Navigation.push<{detail: any}>(componentId, {
          component: {
            name: 'Playlist',
            passProps: {
              detail,
            },
          },
        });
      }}
      radius={10}
      ani>
      <Item
        source={{
          uri: `${picUrl || coverImgUrl}?param=${width || w5}y${width || w5}`,
        }}
        style={{
          width: '100%',
          height: '100%',
        }}
        resizeMode="cover">
        <Name
          start={{x: 0, y: 1}}
          end={{x: 0, y: 0}}
          colors={['#000000', 'rgba(0,0,0,0)']}>
          <Text numberOfLines={2}>{name}</Text>
        </Name>
      </Item>
    </Focusable>
  );
};

const RecommendPlaylist: React.FC<{componentId: string}> = observer(props => {
  const {recommend_playlist, loadRecommendPlaylist} = useGlobal();

  useEffect(() => {
    loadRecommendPlaylist();
  }, []);
  return (
    <Flex style={{width: '100%'}} wrap="wrap" justify="space-between">
      {recommend_playlist.map((i: any) => (
        <RecommendItem componentId={props.componentId} key={i.id} detail={i} />
      ))}
    </Flex>
  );
});

export default RecommendPlaylist;
